import React from 'react';
import {connect} from 'dva';
import {Link} from 'dva/router';
import {Card, Row, Col, Icon} from 'antd';
import {defaultAvatar} from '../../config/config';
import ContentWrapper from '../layouts/ContentWrapper';
import DescriptionList from '../../components/DescriptionList';
import ProfileCard from '../../components/ProfileCard';
// import styles from './PostCatDetail.less';

const {Description} = DescriptionList;
const {ProfileCardItem} = ProfileCard;

@connect(state => ({
  loading: state.loading,
  post: state.post,
}))
export default class PostCatDetail extends React.PureComponent {

  componentDidMount() {
    const {dispatch, match: {params}} = this.props;
    if (params.id) {
      dispatch({
        type: 'post/get',
        payload: params.id
      });
    }
  }

  UNSAFE_componentWillReceiveProps(nextProps) {
    const currentMatchedId = this.props.match.params.id;
    const nextMatchedId = nextProps.match.params.id;
    if (nextMatchedId && currentMatchedId !== nextMatchedId) {
      this.props.dispatch({
        type: 'post/get',
        payload: nextMatchedId
      });
    }
  }

  componentWillUnmount() {
    this.props.dispatch({
      type: 'post/cleanItem',
    });
  }

  render() {
    const {loading, post: {item}} = this.props;
    const itemLoading = loading.effects['post/get'];

    return (
      <ContentWrapper loading={itemLoading}>
        <Row gutter={24}>
          <Col span={8}>
            <ProfileCard
              loading={itemLoading}
              cover={<img src={item.avatar || defaultAvatar}/>}
              title={item.name}
              description="This is the description"
              actions={[null, null, <Link to={`${item.id}/edit`}><Icon type="edit"/></Link>]}
            >
              <ProfileCardItem term="编号">{item.no}</ProfileCardItem>
              <ProfileCardItem term="性别">{item.phone}</ProfileCardItem>
              <ProfileCardItem term="邮箱">{item.email}</ProfileCardItem>
            </ProfileCard>
          </Col>
          <Col span={16}>
            <Card bordered={false}>
              <DescriptionList column={3}>
                <Description term="用户姓名">{item.name}</Description>
                <Description term="登录名">{item.postname}</Description>
                <Description term="联系方式">{item.phone}</Description>
                <Description term="邮箱">{item.email}</Description>
              </DescriptionList>
            </Card>
          </Col>
        </Row>
      </ContentWrapper>
    );
  }
}
